<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据产品档案id，查询是否设计物料</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="/bootstraptable/bootstrap-table.css" rel="stylesheet">
</head>
<body>
<div style="color: #0e9aef;margin: 20px;">您正在做的业务是：生产管理--工序物料设计--制定工序物料设计单</div>
<h2 id="process_h2"></h2>
<div class="container" style="display: none;" id="material_details_div">
    <div style="text-align: right;">
        <button type="button" class="btn btn-default" id="show_btn">预览</button>
        <button type="button" class="btn btn-default" onclick="history.back(-1)">返回</button>
    </div>
    <div class="panel panel-default" style="margin-top: 10px;">
        <div class="page-heading">
            <div class="panel-title">
                <h3 style="text-align: center;">工序物料设计单</h3>
            </div>
        </div>
        <div class="panel-body">
            <div>
                制造：<span id="make_product_name"></span>产品，供选择的物料清单如下：
            </div>
            <table class="table table-bordered table-striped" data-toggle="table" id="process_module_details_table">
                <thead>
                <tr>
                    <th data-field="detailsNumber">序号</th>
                    <th data-field="productName">物料名称</th>
                    <th data-field="productId">物料编号</th>
                    <th data-field="productDescribe">描述</th>
                    <th data-field="amount">设计数量</th>
                    <th data-field="residualAmount">可用数量</th>
                    <th data-field="amountUnit">单位</th>
                    <th data-field="costPrice">单价（元）</th>
                    <th data-field="amount" data-formatter="formatterAmount">本工序数量</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<div class="container" style="display: none;" id="design_product_show_div">
    <div style="text-align: right;" id="add_process_div">
        <button type="button" id="sure_btn" class="btn btn-default">确定</button>
        <button type="button" class="btn btn-default" onclick="history.back()">返回</button>
    </div>
    <div class="panel panel-default" style="margin-top: 10px;">
        <div class="page-heading">
            <div class="panel-title" style="margin-top: 20px;">
                <h3 style="text-align: center;">工序物料设计单</h3>
            </div>
        </div>
        <div class="panel-body">
           <div class="form-group">
               <div class="col-md-6">
                   <label class="control-label col-md-4">工序单编号：</label>
                   <div class="col-md-8">
                       <input type="text" style="border: none; background-color: white;" readonly name="designId" id="designId">
                   </div>
               </div>
               <div class="col-md-6">
                   <label class="control-label col-md-4">工序名称：</label>
                   <div class="col-md-8">
                       <input type="text" style="border: none; background-color: white;" readonly name="procedureName" id="procedureName">
                   </div>
               </div>
           </div>
            <div class="form-group">
                <div class="col-md-6">
                    <label class="control-label col-md-4">登记人：</label>
                    <div class="col-md-8">
                        <input type="text" style="border: none;border-bottom: 1px solid black;"  name="register" id="register">
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="control-label col-md-4">登记时间：</label>
                    <div class="col-md-8">
                        <input type="text" style="border: none; background-color: white;" readonly name="registerTime" id="registerTime">
                    </div>
                </div>
            </div>
            <table class="table table-bordered table-striped" data-toggle="table" id="process_module_details_show_table">
                <thead>
                <tr>
                    <th data-field="detailsNumber">序号</th>
                    <th data-field="productName">物料名称</th>
                    <th data-field="productId">物料编号</th>
                    <th data-field="productDescribe">描述</th>
                    <th data-field="amount">本工序数量</th>
                    <th data-field="amountUnit">单位</th>
                    <th data-field="costPrice">单价（元）</th>
                    <th data-field="subtotal">小计（元）</th>
                </tr>
                </thead>
            </table>
            <input type="hidden" name="gxId" id="gxId">
        </div>
    </div>
</div>

<input type="hidden" id="a">
<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/js/plugins/layer/layer.min.js"></script>

<!-- 自定义js -->
<script src="/js/hAdmin.js?v=4.1.0"></script>
<script src="/js/currentTime.js"></script>

<!-- 第三方插件 -->
<script src="/js/plugins/pace/pace.min.js"></script>

<!--BootstrapTable-->
<script src="/bootstraptable/bootstrap-table.min.js"></script>
<script src="/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>

<script>
    $(function () {
        let name=localStorage.getItem("name")
        let id=localStorage.getItem("sid")
        $("#make_product_name").html(name)
        let productId = localStorage.getItem("productId")
        $.post("/manufacture/process/queryProductId", {"productId": productId}, function (res) {
            if (res == true) {
                $("#material_details_div").css("display","block")
                $.post("/manufacture/process/getModuleDetails",{"productId": productId},function (res){
                    for(let i=0;i<res.length;i++){
                        $("#material_details_div #process_module_details_table").bootstrapTable("append",res[i])
                    }
                })
            }
        })

        //点击预览按钮
        $("#material_details_div #show_btn").click(function (){
            if($("#a").val()=="本工序数量不能超过可用数量"){
               let d= $("#process_module_details_show_table").bootstrapTable("getData")
                for (let i=0;i<d.length;i++){
                    d.splice(i,1)
                    d.splice(i,1)
                }
            }

            //获取所有行数据
            let data=$("#material_details_div #process_module_details_table").bootstrapTable("getData")
            //标记变量 用来判断输入数量是否大于可用数量
            let flag=-1
            for(let i=0;i<data.length;i++){
                if(data[i].amount>data[i].residualAmount){
                    $("#a").val("本工序数量不能超过可用数量")
                    alert("本工序数量不能超过可用数量")
                    flag = i
                    return
                }
                data[i].subtotal=parseInt(data[i].costPrice)*data[i].amount
                $("#process_module_details_show_table").bootstrapTable("append",data[i])
            }
            let data1=$("#design_product_show_div #process_module_details_show_table").bootstrapTable("getData")
            let text=$("#process_module_details_show_table tbody ").find("tr")
            for(let i=text.length-1;i>=0;i--){
                //拿到数量
                let x = $(text[i]).find("td").eq(4).html()
                if(x == "0"){
                    data1.splice(i, 1)
                    $(text[i]).remove()
                }
            }
            console.log("data1",data1)

            if(flag==-1){
                $("#material_details_div").css("display","none")
                $("#design_product_show_div").css("display","block")

                $.post("/manufacture/process/getProductIdQueryId",{"id":productId},function (res){
                        $("#design_product_show_div #register").val(res.register)
                        $("#design_product_show_div #designId").val(res.designId)
                        $("#design_product_show_div #registerTime").val(formater(res.registerTime))
                })
                $.post("/manufacture/process/getIdQueryProcess",{"id":id},function (res){
                    $("#design_product_show_div #procedureName").val(res.procedureName)
                    $("#design_product_show_div #gxId").val(res.id)
                })
            }
        })

        //点击确定按钮
        $("#add_process_div #sure_btn").click(function (res){
            //获取表格数据
            let data=$("#design_product_show_div #process_module_details_show_table").bootstrapTable("getData")
            for (let i=0;i<data.length;i++){
                if(data[i].amount==0){
                    data[i].remove
                }
            }
            let dto={
                "productId":localStorage.getItem("productId"),
                "id":$("#design_product_show_div #gxId").val()
            }
            dto.details=data
            //发送请求
            $.ajax({
                url:"/manufacture/process/addOperationMaterial",
                type: "post",
                data: JSON.stringify(dto),
                contentType: "application/json",
                success: function (data) {
                    localStorage.setItem("id",localStorage.getItem("id"))
                    window.location="manufacture_make_operation_materialUI"
                }
            })
        })

    })
    function formatterAmount(value,row,index){
        return `<input type='text' name='amount' onblur='changeAmounts(this)' />`
    }

    //本工序数量失去焦点时
    function changeAmounts(parms){
        // 文本框的数量
        let val = $(parms).val()
        // 获取文本框所在的行索引
        let index = $(parms).parent("td").parent().index()

        // 获取物料明细表格的所有数据
        let data = $("#material_details_div #process_module_details_table").bootstrapTable("getData")
        // 修改对应对象的labourHourAmount
        data[index].amount = parseInt(val)

    }
</script>
</body>
</html>